import React, {memo,useRef}  from "react";
import type {FC,ReactNode,ComponentRef} from "react";
import {Carousel} from "antd";

import { AlbumWrapper } from "./style";
import AreaHeaderV1 from "@/components/area-header-v1";
import { shallowEqualApp, useAppSelector } from "@/store";
import NewAlbumItem from "@/components/new-album-item";

interface IProps {
    children?:ReactNode
}

const NewAlbum:FC<IProps> = ()=>{

    const bannerRef = useRef<ComponentRef<typeof Carousel>>(null);

    const {newAlbums} = useAppSelector((state)=>{
        return {
            newAlbums:state.recommand.newAlbums
        }
    },shallowEqualApp);

    /**事件绑定函数 */
    function handlePrevClick(){
        bannerRef.current?.prev();
    };
    function handleNextClick(){
        bannerRef.current?.next();
    };

    return (
        <AlbumWrapper>
            <AreaHeaderV1 title="新碟上架" moreLink="/discover/album"></AreaHeaderV1>
            <div className="content">
                <button className="sprite_02 arrow arrow-left" onClick={handlePrevClick}></button>
                <div className="banner">
                    <Carousel
                        ref={bannerRef}
                        speed={2000}
                        dots={false}
                    >
                        {
                            [0,1].map((item)=>{
                                return (
                                    <div key={item}>
                                        <div className="album-list">
                                        {
                                            newAlbums.slice(item * 5, (item + 1) * 5).map((album) => {
                                                return <NewAlbumItem key={album.id} itemData={album} />
                                            })
                                        }
                                        </div>
                                    </div>
                                )
                            })
                        }
                    </Carousel>
                </div>
                <button className="sprite_02 arrow arrow-right" onClick={handleNextClick}></button>
            </div>
        </AlbumWrapper>
    )
}

export default memo(NewAlbum);
